<template>
  <el-card class="mainContainer" shadow="never">
    <el-scrollbar height="calc(100vh - 160px)">

      <el-form :inline="true" :model="formInline"
               v-show="showSearch"
               class="demo-form-inline animate__animated animate__fadeIn">
        <el-form-item label="企业名称：">
          <el-input v-model="formInline.user" placeholder="用户名称" clearable/>
        </el-form-item>
        <el-form-item label="昵称：">
          <el-input v-model="formInline.user" placeholder="昵称" clearable/>
        </el-form-item>
        <el-form-item label="Activity zone">
          <el-select
              v-model="formInline.region"
              placeholder="Activity zone"
              clearable
          >
            <el-option label="Zone one" value="shanghai"/>
            <el-option label="Zone two" value="beijing"/>
          </el-select>
        </el-form-item>
        <el-form-item label="Activity time">
          <el-date-picker
              v-model="formInline.date"
              type="date"
              placeholder="Pick a date"
              clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="info" @click="onSubmit">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="margin-bottom-18"
              style="margin-left: 0;margin-right: 0"
              type="flex" justify="space-between">
        <el-col :span="1.5" style="padding: 0">
          <el-button
              type="primary"
              :icon="Message"
              size=small
          >新建用户
          </el-button>
          <el-button
              type="danger"
              plain
              :icon="Delete"
              size="small"
          >批量删除
          </el-button>
        </el-col>

        <el-col :span="1.5" style="padding: 0">
          <RightToolbar :show-search="showSearch"
                        @updateShowSearch="updateShowSearch"
                        @queryTable="queryTable"/>
        </el-col>
      </el-row>

      <el-table :data="tableData" border
                cell-class-name="custom_table_column"
                style="width: 100%">
        <el-table-column prop="date" label="Date" width="180"/>
        <el-table-column prop="name" label="Name" width="180"/>
        <el-table-column prop="address" label="Address" width="180"/>
      </el-table>
      <el-row :gutter="10" class="margin-top-18"
              style="margin-left: 0;margin-right: 0"
              type="flex" justify="space-between">
        <el-col :span="1.5">
        </el-col>
        <el-col :span="1.5">
          <el-pagination
              layout="total, sizes, prev, pager, next "
              :page-sizes="[100, 200, 300, 600]"
              :total="1000"/>
        </el-col>
      </el-row>


    </el-scrollbar>
  </el-card>
  <el-backtop :right="100" :bottom="100"/>
</template>

<script setup>
//userIndex 用户
import RightToolbar from '@/components/RightToolbar/index.vue'
import {ref, reactive} from 'vue'
import {
  Message,
  Delete
} from '@element-plus/icons-vue'

const showSearch = ref(true)
const updateShowSearch = () => {
  showSearch.value = !showSearch.value
}

const queryTable = () => {
  console.log("chauxn")
}


const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const onSubmit = () => {
  console.log('submit!')
}

const cellClassName = ({row, column, rowIndex, columnIndex}) => {
  console.log(row, column, rowIndex, columnIndex)
}

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }, {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

</script>

<style lang="scss">
//自定义的table cell 样式
.custom_table_column {
  --el-table-row-hover-bg-color: var(--el-color-primary-light-9);
}


</style>